<template>
  <div class="block">
    <div class="img">
      <img :src="img" />
    </div>
    <div class="text">{{ category }}</div>
    <div class="num">{{ num }}</div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {};
  },
  props: ["img", "category", "num"],
};
</script>
<style scoped>
.block {
  height: 90%;
  width: 90%;
  position: relative;
  border-radius: 20px;
  left: 5%;
  top: 5%;
  background-color: white;
  box-shadow: 2px 2px 5px #bbb;
}
.num {
  position: absolute;
  right: 10px;
  top: 10px;
}
.img {
  height: 75%;
  text-align: center;
}
.img img {
  height: 7vh;
  width: 7vh;
  position: relative;
  top: 30%;
}
.text {
  height: 25%;
  text-align: center;
}
</style>
